<template>
	<view>
		<mc-framework navTitle="MES工控机" @changeLevel="changeLevel">
			<template #workbench>
				<view class="TabsBox">


				</view>


			</template>

			<!-- 主内容 -->
			<template #content>
				<view class="content">
					<z-paging ref="paging" v-model="contents" @query="queryList" :fixed="false" class="z_paging">
						<view class="table" style="overflow-x: auto;width: 100%;">
							<table>
								<tr>
									<th>人员名称</th>
									<th>上班打卡时间</th>
									<th>下班打卡时间</th>
									<th>班次</th>

								</tr>
								<tbody>
									<tr v-for="(item,index) in contents">
										<td>{{item.EmplName}}</td>
										<td>{{item.ClockIn}}</td>
										<td>{{item.ClockOut}}</td>
										<td>{{item.ShiftName}}</td>
									</tr>
								</tbody>
							</table>

						</view>

					</z-paging>

				</view>

				<view class="search">
					<u-icon name="search" color="#fff" size="30" @click="search"></u-icon>
				</view>


				<uni-popup ref="popup" type="bottom" background-color="#fff" border-radius="10px 10px 0 0"
					@change="changePopup">
					<view class="popup-content">
						<u-cell-group :border='false'>
							<!-- 
							<u-cell title="班次" :isLink="false" :value="FormData.ShiftName"
								@click="addBShiftName()"></u-cell> -->
							<u-cell title="开始时间" :isLink="false" :value='FormData.FBDate'
								@click="addTime('开始')"></u-cell>
							<u-cell title="结束时间" :isLink="false" :value='FormData.FEDate'
								@click="addTime('结束')"></u-cell>
						</u-cell-group>
						<view class="bottomBtns">
							<button block @click="submit">
								查 &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp 询
							</button>
						</view>

					</view>
				</uni-popup>
				<u-datetime-picker :show="show" v-model="value1" mode="date" @cancel='show = false'
					@confirm='pickerConfirm'></u-datetime-picker>

			</template>




		</mc-framework>



	</view>
</template>

<script>
	import {
		getFormatDateTime,
		getBefore7DateTime
	} from '@/mes/common/base.js';

	export default {
		data() {
			return {
				contents: [],
				FormData: {
					PageIndex: 1,
					PageSize: 30,
					FBDate: '',
					FEDate: '',
					EmplID: ''
				},
				show: false,
				value1: Number(new Date()),
				TimeName: '',

			};
		},
		onLoad() {
			var that = this

			this.FormData.FBDate = getBefore7DateTime()
			this.FormData.FEDate = getFormatDateTime(new Date())
			this.FormData.EmplID = this.$store.state.UserInfo.EmplID
			this.$store.state.GuyueModule.MesBasicInfo.Status.ClockStatusTitle = '其他'
		},
		onShow() {},
		onBackPress(options) { // 监听页面返回
			if (options.from == 'navigateBack') { // 通过点击路由返回
				return false;
			} else if (options.from == 'backbutton') { // 通过外置返回
				return true;
			}
		},
		mounted() {

		},

		methods: {

			addTime(name) {
				this.show = true
				this.TimeName = name
			},

			pickerConfirm(e) {
				var time = getFormatDateTime(e.value)
				if (this.TimeName == '开始') {
					this.FormData.FBDate = time
				} else {
					this.FormData.FEDate = time
				}
				this.show = false
			},
			search() {
				this.$refs.popup.open('bottom')
			},
			submit() {
				this.$refs.popup.close('bottom')
				this.queryList();
			},

			changePopup() {

			},

			queryList() {
				let that = this;
				try {

					that.Request.request('getClockRecords', this.FormData, (ret) => {
						if (ret.status == 200) {
							// .split('T')[0] : ''
							// ClockIn
							// ClockOut
							// ret.data.ds.map(item => {
							// 	item.ClockIn = item.ClockIn.split('T')[0]: '';
							// 	item.ClockOut = item.ClockOut.split('T')[0]: ''
							// })
							ret.data.ds.map((item) => {
								item.ClockIn = item.ClockIn ? item.ClockIn.replace('T', ' ') : ''
								item.ClockOut = item.ClockOut ? item.ClockOut.replace('T', ' ') : ''
							})
							that.$refs.paging.complete(ret.data.ds);
						}
					})
				} catch (e) {
					console.log(e)
					this.$utils.hideLoading();
					this.$utils.msg('请求失败请重试')
				}

			},

			changeLevel(data, row) {
				let routes = getCurrentPages(); //当前页面栈
				let backIndex = routes.length - row.length; // 计算返回页面栈数
				uni.navigateBack({
					delta: backIndex
				})
			},
			clearHovered() {
				this.hoveredIndex = null; // 清除hover的tr索引  
			},

		}
	}
</script>

<style lang="scss">
	@import "../css/index.css";

</style>